<template>
  <table-container>
    <lg-table :schema="columns" v-bind="tableProps">
      <template #dataSourceId>
        <lg-biz-select
          v-model="dataSourceId"
          :data="dbList"
          label-field="label"
          value-field="value"
          @change="reload()"
        />
      </template>
      <!-- 工具栏 -->
      <template #toolbar-left>
        <btn-tool-add @click="ddlGenConfigRef.open()">使用ddl生成</btn-tool-add>
        <span class="gl-ml">代码生成须启动“soar-generator”模块下的“SoarGeneratorApplication”提供服务</span>
      </template>
      <template #actionbar="{ row }">
        <a @click="tableNameGen(row)">生成</a>
      </template>
    </lg-table>
    <gen-config ref="genConfigRef" />
    <edit-container ref="ddlGenConfigRef" header="代码生成" @confirm="ddlGen">
      <t-textarea v-model="ddl" placeholder="请输入建表sql" :autosize="{ minRows: 6, maxRows: 15 }"></t-textarea>
    </edit-container>
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { LgTable, notEmpty, useTable } from '@/soar';
import { TableContainer } from '@/components';
import EditContainer from '@/components/EditContainer/Modal.vue';
import { columns } from './config';
import { dbList, parseTableInfo, tableInfo, tableList } from './api';
import GenConfig from './GenConfig.vue';
import LgBizSelect from '@/soar/components/LgBizSelect/index.vue';

const genConfigRef = ref();
const ddlGenConfigRef = ref();
const ddl = ref('');
const dataSourceId = ref('');

function ddlGen() {
  notEmpty(ddl.value, '请输入请输入建表sql');
  parseTableInfo(ddl.value).then((res: any) => {
    ddlGenConfigRef.value.close();
    genConfigRef.value.open(res);
    ddl.value = '';
  });
}

function tableNameGen(row: any) {
  tableInfo(row.TABLE_NAME, dataSourceId.value).then((res: any) => {
    genConfigRef.value.open(res);
  });
}

const { tableProps, reload } = useTable<any>({
  props: {
    rowKey: 'TABLE_NAME',
    alert: false,
    selection: false,
    paramsHandle(_: any, raw: any) {
      return { ...raw.params, ...raw.page, dataSourceId: dataSourceId.value };
    },
    data: tableList,
  },
});
</script>
